<template>
  <div class="card" style="width: 18rem">
    <div class="card-body">
      <h5 class="card-title text-center">热门推荐</h5>
      <ul class="list-group list-group-flush">
        <li class="list-group-item" v-for="item in hotBookList" :key="item.id">
          <router-link :to="'/detail/' + item.id"
            >{{ item.title }} &nbsp; ￥{{ realPrice(item) }}</router-link
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotBookList: [],
    };
  },
  created() {
    // 原
    // this.axios.get("/api/book/hot").then((res) => {
    //   console.log(res);
    //   this.hotBookList = res.data;
    // });

    this.axios.get("/api/book/hot").then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.hotBookList = res.data.data;
      }
    });
  },
  methods: {
    realPrice(item) {
      return parseFloat(item.price * item.discount).toFixed(2);
    },
  },
};
</script>
<style lang="scss" scoped>
a {
  text-decoration: underline;
}
</style>
